<template lang="html">
    <div class="login_container">
        <div class="login_box">
            <!-- 头像区域 -->
            <div class="avatar_box">
                <img src="../assets/logo.png">
            </div>
            <!-- 表单区域 -->
            <el-form ref="loginForm" class="login_form" :model="loginForm" :rules="loginFormRules" status-icon>
                 <el-form-item prop="username">
                    <el-input v-model="loginForm.username"  placeholder="账号" prefix-icon="iconfont icon-user"></el-input>
                </el-form-item>
                <el-form-item prop="pass">
                    <el-input type="password" v-model="loginForm.pass" placeholder="密码" prefix-icon="iconfont icon-3702mima"></el-input>
                </el-form-item>
                <el-form-item prop="checkPass">
                    <el-input type="password" v-model="loginForm.checkPass" placeholder="请再输一次密码" prefix-icon="iconfont icon-3702mima"></el-input>
                </el-form-item>
                <el-form-item class="btns">
                    <el-button type="primary" @click="login">提交</el-button>
                    <el-button type="info" @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
export default {
  data () {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.loginForm.checkpass !== '') {
          this.$refs.loginForm.validateField('checkPass')
        }
      }
      callback()
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.loginForm.pass) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      loginForm: {
        username: 'admin',
        pass: '123456',
        checkPass: '123456'
      },
      // 表单验证规则
      loginFormRules: {
        username: [
          { required: true, message: '输入内容不能为空!', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        pass: [
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass2, trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  methods: {
    // 点击重置
    resetForm () {
      this.$refs.loginForm.resetFields()
    },
    // 登录验证
    login () {
      this.$refs.loginForm.validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$http.post('login', {
          username: this.loginForm.username,
          password: this.loginForm.pass
        })
        if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
        // 将服务器发来的token存入sessionStorage中
        window.sessionStorage.setItem('token', res.data.token)
        this.$router.push('/home')
      })
    }
  }
}
</script>
<style lang="scss" scoped>
        .login_container{
          background-color: #2b4b6b;
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
        }
        .login_box{
            width: 35%;
            height: 50%;
            background-color: #fff;
            border-radius: 3px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            .avatar_box{
                width: 130px;
                height: 130px;
                position: absolute;
                top: 0;
                left: 50%;
                transform: translate(-50%,-50%);
                border: 1px solid #eee;
                border-radius: 50%;
                box-shadow: 0 0 10px #ddd;
                padding: 10px;
                background-color: #fff;
                img{
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                    background-color: #eee;
                }
            }
            .login_form{
                position: absolute;
                bottom: 0;
                width: 100%;
                box-sizing: border-box;
                padding: 0 20px;
                .btns{
                    display: flex;
                    justify-content: center;
                }
            }
        }

</style>
